import React from 'react'
import Admin from "../../../layout/Admin";
import {
    Button,
    Form,
    Input,
    InputNumber,
    Modal,
    PageHeader,
    Table,
    DatePicker,
    Radio,
    Select,
    Checkbox,
    Popover, Popconfirm
} from "antd";
import VoteModel from "../../../model/vote";
import PaginationFooter from "../../../component/PaginationFooter/PaginationFooter";
import { MinusCircleOutlined, PlusOutlined } from '@ant-design/icons';
import moment from "moment";

import Info from "../../../service/info";
import {defaultEnd, defaultStart} from "../../user/user-total/user-total";
import PlayerModel from "../../../model/player";
const log = console.log.bind(console)
const { RangePicker } = DatePicker
const rangeConfig = {
    rules: [
        {
            type: 'array',
            required: true,
            message: 'Please select time!',
        },
    ],
}
export const formLayout = {
    labelCol: { span: 8 },
    wrapperCol: { span: 16 },
}
export const formTailLayout = {
    wrapperCol: { offset: 8, span: 16 },
}



class Vote extends React.Component {

    constructor(props) {
        super(props)
        this.model = new VoteModel()
        this.playerModel = new PlayerModel()
        this.state = {
            list: [],
            p: 0,
            type: 1,
            start: defaultStart,
            end: defaultEnd,
            timeCheck: false,
            result: null,
            modal: {
                player: false,
                lineup: false,
                forecast: false,
                result: false,
                players: false,
            },
            star: [],
            players: [],
            selected: [],
            forecast: {},
            forward: [],
            center: [],
            guard: [],
            keeper: [],
            selectedPosition: '',
            saveId: null,
        }
        this.playerColumns = [
            {
                dataIndex: 'Id',
                title: 'Id',
            },
            {
                dataIndex: 'Match',
                title: '联赛',
            },
            {
                dataIndex: 'Title',
                title: '球员',


            },
            {
                dataIndex: 'Score',
                title: '星数',
            },
            {
                dataIndex: 'Createt',
                title: '创建时间',
                render: this.renderTimeColumn,
            },
            {
                dataIndex: 'Startt',
                title: '开始时间',
                render: this.renderTimeColumn,
            },
            {
                dataIndex: 'Endt',
                title: '结束时间',
                render: this.renderTimeColumn,
            },
            {
                title: '操作',
                render: (record) => {
                    return <div>
                        <Popconfirm title={'确认删除？'}
                                    onConfirm={() => this.deleteVote(record)}
                        >
                            <a style={{marginRight: 8,}}>删除</a>
                        </Popconfirm>
                        <a onClick={() => this.result(record)}>查看</a>
                    </div>
                }
            }
        ]
        this.lineupColumns = [
            {
                dataIndex: 'Id',
                title: 'Id',
            },
            {
                dataIndex: 'Match',
                title: '联赛',
            },
            {
                dataIndex: 'Option',
                title: '阵容',
                render: (list) => {
                    const titles = ['前锋', '中场', '后卫', '守门员',]

                    const buttons = list && list.map((players, index) => {
                        const title = titles[index]
                        if (Array.isArray(players)) {
                            const content = <div>
                                {players && players.map((name, index) => <p key={index}>{name}</p>)}
                            </div>
                            return <Popover content={content} key={index} title={title}>
                                <Button>
                                    {title}
                                </Button>
                            </Popover>
                        }
                    })
                    return buttons
                }
            },
            {
                dataIndex: 'Createt',
                title: '创建时间',
                render: this.renderTimeColumn,
            },
            {
                dataIndex: 'Startt',
                title: '开始时间',
                render: this.renderTimeColumn,
            },
            {
                dataIndex: 'Endt',
                title: '结束时间',
                render: this.renderTimeColumn,
            },
            {
                title: '操作',
                render: (record) => {
                    return <div className='action-links'>
                        <Popconfirm title={'确认删除？'}
                                    onConfirm={() => this.deleteVote(record)}
                        >
                            <a style={{marginRight: 8,}}>删除</a>
                        </Popconfirm>
                        <a onClick={() => this.result(record)}>查看</a>
                        {record.State === 1 && <a onClick={() => this.edit(record)}>编辑</a>}
                    </div>
                }
            }
        ]
        this.forecastColumns = [
            {
                dataIndex: 'Id',
                title: 'Id',
            },
            {
                dataIndex: 'Match',
                title: '联赛',
            },
            {
                dataIndex: 'Stype',
                title: '类型',
                render: (type) => {
                    return ['我最喜欢的球队', '最佳射手', '本场最佳球员',][type - 1]
                }
            },
            {
                dataIndex: 'Option',
                title: '选项',
                render: (list) => {
                    const title = '选项'
                    const content = <div>
                        {list && list.map((name, index) => <p key={index}>{name.Op}: 占比{name.Weight}</p>)}
                    </div>
                    return <Popover content={content} title={title}>
                        <Button>
                            {title}
                        </Button>
                    </Popover>
                }
            },
            {
                dataIndex: 'Createt',
                title: '创建时间',
                render: this.renderTimeColumn,
            },
            {
                dataIndex: 'Startt',
                title: '开始时间',
                render: this.renderTimeColumn,
            },
            {
                dataIndex: 'Endt',
                title: '结束时间',
                render: this.renderTimeColumn,
            },
            {
                title: '操作',
                render: (record) => {
                    return <div>
                        <Popconfirm title={'确认删除？'}
                                    onConfirm={() => this.deleteVote(record)}
                        >
                            <a style={{marginRight: 8,}}>删除</a>
                        </Popconfirm>

                        <a onClick={() => this.result(record)}>查看</a>
                    </div>
                }
            }
        ]
    }

    componentDidMount() {
        this.all()
    }

    all = () => {
        const params = {
            P: this.state.p,
            Flag: this.state.type,
        }
        if (this.state.timeCheck) {
            // 2006-01-02 15:04:05
            const start = this.state.start.format('X')
            const end = this.state.end.format('X')
            params.Starttime = parseInt(start)
            params.Endtime = parseInt(end)
        }
        this.model
            .all(params)
            .then(res => {
                this.setState({
                    list: res.data.ok,
                })
            })
    }

    onSearch = (key) => {
        this.playerModel
            .all({P: -1, Txt: key,})
            .then(res => {
                const list = res.data.ok
                log(list)
                this.setState({
                    players: list,
                }, () => this.callModal('players'))
            })
    }

    result = (vote) => {
        const params = {
            Sid: vote.Id,
            Flag: this.state.type,
        }
        this.model.result(params)
            .then(res => {
                const data = res.data.ok
                if (data) {
                    this.setState({
                        result: data,
                    }, () => this.callModal('result'))
                }
            })
    }

    edit = (record) => {
        log(record)
        // Count: 4
        // Createt: 1617764161
        // Endt: 1617850556
        // Id: 20
        // Match: "Allen"
        // Option: (4) [Array(1), Array(0), Array(0), Array(0)]
        // Startt: 1617764156
        // State: 1
        const start = moment(new Date(record.Startt * 1000))
        const end = moment(new Date(record.Endt * 1000))
        const eventName = record.Match
        const player = record.Option
        this.callModal('lineup')
        this.setState({
            forward: player[0],
            center: player[1],
            guard: player[2],
            keeper: player[3],
            saveId: record.Id,
        }, () => {
            setTimeout(() => {
                this.lineupForm.setFieldsValue({
                    time: [start, end,],
                    eventName,
                })
            })
        })
    }

    deleteVote = (vote) => {
        log(vote)
        // houtai/delselection //删除
        // type DelSelectionJson struct {
        //     Id   int `binding:"min=1"`
        //     Flag int `binding:"min=1,max=3"` //标识，1=打分，2=阵容，3=预测
        // }
        const params = {
            Id: vote.Id,
            Flag: this.state.type,
        }
        this.model
            .delete(params)
            .then((res) => {
                if (res.data.ok === 1) {
                    Info.success('删除成功')
                }
            })
            .then(() => this.all())
    }

    prevPage = () => {
        this.setState({
            p: this.state.p - 1,
        }, () => this.all())
    }

    nextPage = () => {
        this.setState({
            p: this.state.p + 1,
        }, () => this.all())
    }

    callModal(key) {
        this.setState({
            ...this.state,
            modal: {
                ...this.state.modal,
                [key]: true,
            }
        })
    }

    cancelModal(key) {
        this.setState({
            ...this.state,
            modal: {
                ...this.state.modal,
                [key]: false
            }
        })
    }

    onDateChange = (value,) => {
        const [start, end,] = value
        this.setState({
            start,
            end,
        }, () => {
            // this.get()
            this.all()
        })
    }


    onTypeSelect = (value, option) => {
        this.setState({
            type: value,
            p: 0,
        }, () => this.all())
    }

    onPlayerStarChange = (value) => {
        if (value) {
            const star = []
            for (let i = 0; i < value; i++) {
                star.push(i)
            }
            this.setState({
                star: star,
            })
        }
    }

    onAddPlayerFinish = (value) => {
        log('add player value', value)
        const [start, end] = value.time

        const params = {
            Title: value.playerName,
            Match: value.eventName,
            Total: value.total,
            Startt: parseInt(start.format('X')),
            Endt: parseInt(end.format('X')),
            Weight: [],
        }
        for (let i = 0; i < value.star; i++) {
            params.Weight.push(value[`star${i}`] || 0)
        }
        log(params)
        this.model
            .addGrade(params)
            .then(res => {
                const data = res.data
                if (data.ok === 1) {
                    this.cancelModal('player')
                    Info.success('添加成功')
                }
                this.playerForm.resetFields()
            })
            .then(() => {
                this.setState({
                    p: 0,
                    type: 1,
                }, () => this.all())
            })
    }

    onAddLineupSave = () => {
        const value = this.lineupForm.getFieldsValue()
        this.lineupForm.validateFields()
            .then(result => {
                const [start, end] = value.time

                const params = {
                    Id: this.state.saveId,
                    Match: value.eventName,
                    Option: [
                        // value.forward,
                        // value.center,
                        // value.guard,
                        // value.keeper,
                        this.state.forward,
                        this.state.center,
                        this.state.guard,
                        this.state.keeper,
                    ],
                    State: 1,
                    Startt: parseInt(start.format('X')),
                    Endt: parseInt(end.format('X')),
                }

                this.model
                    .addLineUp(params)
                    .then(res => {
                        if (res.data.ok === 1) {
                            this.cancelModal('lineup')
                            Info.success('保存成功')
                        }
                        this.lineupForm.resetFields()
                    })
                    .then(() => {
                        this.setState({
                            type: 2,
                            p: 0,
                        } , () => {
                            this.all()
                        })
                    })
            })
            .catch((e) => {
                log(e)
            })

    }

    onAddLineupFinish = (value) => {
        const [start, end] = value.time

        const params = {
            Match: value.eventName,
            Option: [
                // value.forward,
                // value.center,
                // value.guard,
                // value.keeper,
                this.state.forward,
                this.state.center,
                this.state.guard,
                this.state.keeper,
            ],
            State: 0,
            Startt: parseInt(start.format('X')),
            Endt: parseInt(end.format('X')),
        }
        if (this.state.saveId) {
            params.Id = this.state.saveId
        }
        log(params)
        this.model
            .addLineUp(params)
            .then(res => {
                if (res.data.ok === 1) {
                    this.cancelModal('lineup')
                    Info.success('添加成功')
                }
                this.lineupForm.resetFields()
            })
            .then(() => {
                this.setState({
                    type: 2,
                    p: 0,
                } , () => {
                    this.all()
                })
            })
    }

    onAddForecastFinish = (value) => {
        log(value)
        log(this.state)
        const [start, end] = value.time
        const params = {
            Match: value.eventName,
            Title: value.title,
            Option: value.forecast.map((opt, index) => ({Op: opt, Weight: this.state.forecast[index] || 0,})),
            Stype: value.type,
            Startt: parseInt(start.format('X')),
            Endt: parseInt(end.format('X')),
            Total: value.total,
        }
        const weightTotal = params.Option.reduce((acc, cur) => acc + cur.Weight, 0)
        if (weightTotal > 100) {
            Info.warning('权重总和不应超过100')
            return
        }

        this.model
            .addForecast(params)
            .then(res => {
                if (res.data.ok === 1) {
                    this.cancelModal('forecast')
                    Info.success('添加成功')
                }
                this.forecastForm.resetFields()
            })
            .then(() => {
                this.setState({
                    type: 3,
                    p: 0,
                } , () => {
                    this.all()
                })
            })
    }

    renderTimeColumn = (time) => {
        return moment(new Date(time * 1000)).format('YYYY/MM/DD HH:mm')
    }

    renderPlayerFields = (fields, {add, remove,}, lineupKey) => {
        const labels = {
            'forward': '前锋',
            'center': '中场',
            'guard': '后卫',
            'keeper': '守门员',
            'forecast': '选项'
        }
        const label = labels[lineupKey]
        return <>
            {fields.map((field, index) => (
                <Form.Item
                    {...(index === 0 ? formLayout : formTailLayout)}
                    label={index === 0 ? label : ''}
                    required={false}
                    key={field.key}
                >
                    <Form.Item
                        {...field}
                        validateTrigger={['onChange', 'onBlur']}
                        rules={[
                            {
                                required: true,
                                whitespace: true,
                                message: "填写球员/队名或删除",
                            },
                        ]}
                        noStyle
                    >
                        <Input placeholder="球员名/队名" style={{ width: '60%' }} />
                    </Form.Item>
                    {fields.length > 1 ? (
                        <MinusCircleOutlined
                            className="dynamic-delete-button"
                            onClick={() => remove(field.name)}
                        />
                    ) : null}
                    <InputNumber onChange={(value) => {
                        this.setState({
                            [lineupKey]: {
                                ...this.state[lineupKey],
                                [field.key]: value,
                            }
                        })
                    }} placeholder='占比' value={this.state[lineupKey][field.key]}/>
                </Form.Item>
            ))}
            <Form.Item {...formTailLayout}>
                <Button
                    type="dashed"
                    onClick={() => add()}
                    style={{ width: '60%' }}
                    icon={<PlusOutlined />}

                >
                    添加{label}
                </Button>
            </Form.Item>
        </>
    }

    renderResult = () => {
        const result = this.state.result
        const type = this.state.type
        if (result) {
            if (type === 1) {
                return result.map && result.map((value, index) => {
                    return <p key={index}>{value.Score + 1}颗星：{value.Count}人选择</p>
                })
            } else if (type === 2) {
                return Object.entries(result).map(([player, count], index) => {
                    return <p key={index}>{player}：{count}人选择</p>
                })
            } else if (type === 3) {
                return result.map && result.map((value, index) => {
                    return <p key={index}>{value.Option}：{value.Count}人选择</p>
                })
            }
        }
    }

    onPlayersCheckboxChange = (option) => {
        this.setState({
            selected: [...option,]
        })
        // this.setState({
        //     forward: [...this.state.forward, ...option]
        // })
    }

    addToLineUp = (pos) => {
        this.setState({
            [pos]: [...this.state[pos], ...this.state.selected,],
            selected: [],
        })
    }

    onPositionListClick = (key) => {
        this.setState({
            selectedPosition: key,
        }, () => this.callModal('position'))
    }

    deletePlayerAtPosition = (index) => {
        const pos = this.state[this.state.selectedPosition]
        pos.splice(index, 1)
        this.setState({
            [this.state.selectedPosition]: [...pos,],
        })
    }

    onLineupModalCancel = () => {
        this.lineupForm.resetFields()
        this.setState({
            forward: [],
            center: [],
            guard: [],
            keeper: [],
        }, () => this.cancelModal('lineup'))
    }

    render() {
        const positionList = this.state[this.state.selectedPosition] || []
        return <>
            <Modal
                visible={this.state.modal.position}
                width={400}
                footer={null}
                onCancel={() => {
                    this.setState({
                        result: null,
                    }, () => this.cancelModal('position'))
                }}
            >
                <div style={{paddingTop: '24px',}}>
                    {positionList.length > 0
                        ? positionList.map((player, index) => <p key={index}>
                            {player} <a onClick={() => this.deletePlayerAtPosition(index)} key={player}>删除</a></p>)
                        : <a onClick={() => this.cancelModal('position')}>未选择任何球员，去选择</a>
                    }
                </div>
            </Modal>
            <Modal
                visible={this.state.modal.players}
                onCancel={() => {
                    this.cancelModal('players')
                    this.setState({
                        selected: [],
                    })
                }}
                footer={null}
                title='球员列表'
            >
                <Checkbox.Group
                    value={this.state.selected}
                    options={this.state.players.map(p => {
                        return {
                            label: p.Name,
                            value: p.Name,
                            disabled: [
                                ...this.state.forward,
                                ...this.state.center,
                                ...this.state.keeper,
                                ...this.state.guard,
                            ].findIndex(opt => opt === p.Name) > -1,
                        }
                    })}
                    onChange={(option) => this.onPlayersCheckboxChange(option)}
                />
                <div style={{marginTop: '24px',}}>
                    {['forward', 'center', 'guard', 'keeper'].map((pos) => {
                        const labels = {
                            'forward': '前锋',
                            'center': '中场',
                            'guard': '后卫',
                            'keeper': '守门员',
                            'forecast': '选项'
                        }
                        return <Button onClick={() => this.addToLineUp(pos)} key={pos} style={{marginRight: '8px',}}>添加到{labels[pos]}</Button>
                    })}
                </div>
            </Modal>

            <Modal
                visible={this.state.modal.result}
                onCancel={() => this.cancelModal('result')}
                footer={null}
                title='评选详情'
            >
                {this.renderResult()}
            </Modal>

            <Modal
                visible={this.state.modal.player}
                onCancel={() => this.cancelModal('player')}
                footer={null}
                // onOk={() => {}}
                title='添加球员评分'
            >
                <Form
                    {...formLayout}
                    name="player"
                    // initialValues={{
                    //     remember: true,
                    // }}
                    ref={el => this.playerForm = el}
                    onFinish={this.onAddPlayerFinish}
                    // onFinishFailed={onFinishFailed}
                >
                    <Form.Item
                        label="球员名称"
                        name="playerName"
                        rules={[
                            {
                                required: true,
                                message: '请输入球员名称',
                            },
                        ]}
                    >
                        <Input placeholder='请输入球员名称'/>
                    </Form.Item>

                    <Form.Item
                        label="联赛"
                        name="eventName"
                        rules={[
                            {
                                required: true,
                                message: '请输入联赛',
                            },
                        ]}
                    >
                        <Input placeholder='请输入联赛'/>
                    </Form.Item>

                    <Form.Item
                        label='总票数'
                        name='total'
                        rules={[
                            {
                                required: true,
                                message: '请输入总票数',
                            },
                        ]}
                    >
                        <InputNumber />
                    </Form.Item>

                    <Form.Item
                        label="星星数"
                        name="star"
                        rules={[
                            {
                                required: true,
                                message: '请输入星星数',
                            },
                        ]}
                    >
                        <InputNumber onChange={(value) => this.onPlayerStarChange(value)}/>
                    </Form.Item>

                    {this.state.star.map((_, index) => {
                        return <Form.Item
                            key={index}
                            label={`${index + 1}星占比`}
                            name={`star${index}`}
                            // rules={[
                            //     {
                            //         required: true,
                            //         message: '请输入占比',
                            //     },
                            // ]}
                        >
                            <InputNumber/>
                        </Form.Item>
                    })}

                    <Form.Item
                        name="time" label="截止日期" {...rangeConfig}>
                        <RangePicker showTime format="YYYY-MM-DD HH:mm:ss" />
                    </Form.Item>

                    <Form.Item {...formTailLayout}>
                        <Button type="primary" htmlType="submit">
                            Submit
                        </Button>
                    </Form.Item>
                </Form>
            </Modal>

            <Modal
                visible={this.state.modal.lineup}
                // onCancel={() => this.cancelModal('lineup')}
                onCancel={this.onLineupModalCancel}
                footer={null}
                // onOk={() => {}}
                title='添加最佳阵容'
            >
                <Form
                    {...formLayout}
                    name="lineup"
                    ref={el => this.lineupForm = el}
                    onFinish={this.onAddLineupFinish}
                    // onFinishFailed={onFinishFailed}
                >
                    <Form.Item
                        label="联赛"
                        name="eventName"
                        rules={[
                            {
                                required: true,
                                message: '请输入联赛',
                            },
                        ]}
                    >
                        <Input placeholder='请输入联赛'/>
                    </Form.Item>

                    <Form.Item
                        label="俱乐部"
                    >
                        <Input.Search placeholder='请输入俱乐部名' onSearch={this.onSearch}/>
                    </Form.Item>

                    <Form.Item
                        // name="forward"
                        label='前锋'
                    >
                        {/*<Select*/}
                        {/*    mode="multiple"*/}
                        {/*    style={{ width: '100%' }}*/}
                        {/*    placeholder="Please select"*/}
                        {/*>*/}
                        {/*    {this.state.forward.map((option, index) => <Select.Option key={index} value={option}>{option}</Select.Option>)}*/}
                        {/*</Select>*/}
                        <a onClick={() => this.onPositionListClick('forward')}>已经选择{this.state.forward.length}人</a>
                    </Form.Item>
                    <Form.Item
                        // name="forward"
                        label='中场'
                    >
                        {/*<Select*/}
                        {/*    mode="multiple"*/}
                        {/*    style={{ width: '100%' }}*/}
                        {/*    placeholder="Please select"*/}
                        {/*>*/}
                        {/*    {this.state.forward.map((option, index) => <Select.Option key={index} value={option}>{option}</Select.Option>)}*/}
                        {/*</Select>*/}
                        <a onClick={() => this.onPositionListClick('center')}>已经选择{this.state.center.length}人</a>
                    </Form.Item>
                    <Form.Item
                        // name="forward"
                        label='后卫'
                    >
                        {/*<Select*/}
                        {/*    mode="multiple"*/}
                        {/*    style={{ width: '100%' }}*/}
                        {/*    placeholder="Please select"*/}
                        {/*>*/}
                        {/*    {this.state.forward.map((option, index) => <Select.Option key={index} value={option}>{option}</Select.Option>)}*/}
                        {/*</Select>*/}
                        <a onClick={() => this.onPositionListClick('guard')}>已经选择{this.state.guard.length}人</a>
                    </Form.Item>
                    <Form.Item
                        // name="forward"
                        label='守门员'
                    >
                        {/*<Select*/}
                        {/*    mode="multiple"*/}
                        {/*    style={{ width: '100%' }}*/}
                        {/*    placeholder="Please select"*/}
                        {/*>*/}
                        {/*    {this.state.forward.map((option, index) => <Select.Option key={index} value={option}>{option}</Select.Option>)}*/}
                        {/*</Select>*/}
                        <a onClick={() => this.onPositionListClick('keeper')}>已经选择{this.state.keeper.length}人</a>
                    </Form.Item>

                    {/*<Form.List*/}
                    {/*    name="forward"*/}
                    {/*>*/}
                    {/*    {(fields, { add, remove, },) => this.renderPlayerFields(fields, { add, remove, }, 'forward')}*/}
                    {/*</Form.List>*/}
                    {/*<Form.List*/}
                    {/*    name="center"*/}
                    {/*>*/}
                    {/*    {(fields, { add, remove, },) => this.renderPlayerFields(fields, { add, remove, }, 'center')}*/}
                    {/*</Form.List>*/}
                    {/*<Form.List*/}
                    {/*    name="guard"*/}
                    {/*>*/}
                    {/*    {(fields, { add, remove, },) => this.renderPlayerFields(fields, { add, remove, }, 'guard')}*/}
                    {/*</Form.List>*/}
                    {/*<Form.List*/}
                    {/*    name="keeper"*/}
                    {/*>*/}
                    {/*    {(fields, { add, remove, },) => this.renderPlayerFields(fields, { add, remove, }, 'keeper')}*/}
                    {/*</Form.List>*/}

                    <Form.Item
                        name="time" label="截止日期" {...rangeConfig}
                    >
                        <RangePicker showTime format="YYYY-MM-DD HH:mm:ss" />
                    </Form.Item>

                    <Form.Item {...formTailLayout}>
                        <Button type="primary" htmlType="submit">
                            提交
                        </Button>
                        <Button style={{marginLeft: '8px',}} onClick={this.onAddLineupSave}>
                            保存
                        </Button>
                    </Form.Item>
                </Form>
            </Modal>

            <Modal
                visible={this.state.modal.forecast}
                onCancel={() => this.cancelModal('forecast')}
                footer={null}
                // onOk={() => {}}
                width='60%'
                title='添加我的最爱'
            >
                <Form
                    {...formLayout}
                    name="lineup"
                    ref={el => this.forecastForm = el}
                    onFinish={this.onAddForecastFinish}
                    // onFinishFailed={onFinishFailed}
                >
                    <Form.Item
                        label="联赛"
                        name="eventName"
                        rules={[
                            {
                                required: true,
                                message: '请输入联赛',
                            },
                        ]}
                    >
                        <Input placeholder='请输入联赛'/>
                    </Form.Item>

                    <Form.Item
                        label="标题"
                        name="title"
                        rules={[
                            {
                                required: true,
                                message: '请输入标题',
                            },
                        ]}
                    >
                        <Input placeholder='请输入标题'/>
                    </Form.Item>

                    <Form.Item name="type" label="类型">
                        <Radio.Group>
                            <Radio value={1}>我最喜欢的球队</Radio>
                            <Radio value={2}>最佳射手</Radio>
                            <Radio value={3}>本场最佳球员</Radio>
                        </Radio.Group>
                    </Form.Item>

                    <Form.Item
                        label='总票数'
                        name='total'
                        rules={[
                            {
                                required: true,
                                message: '请输入总票数',
                            },
                        ]}
                    >
                        <InputNumber />
                    </Form.Item>

                    <Form.List
                        name="forecast"
                    >
                        {(fields, { add, remove, },) => this.renderPlayerFields(fields, { add, remove, }, 'forecast')}
                    </Form.List>

                    <Form.Item
                        name="time" label="截止日期" {...rangeConfig}>
                        <RangePicker showTime format="YYYY-MM-DD HH:mm:ss" />
                    </Form.Item>

                    <Form.Item {...formTailLayout}>
                        <Button type="primary" htmlType="submit">
                            Submit
                        </Button>

                    </Form.Item>
                </Form>
            </Modal>

            <Admin>
                <div className='list-container'>
                    <PageHeader title='评选活动管理' />

                    <div style={{marginBottom: '12px',}}>
                        <Button
                            style={{marginRight: '8px'}}
                            onClick={() => this.callModal('player')}
                        >添加球员评分</Button>
                        <Button
                            style={{marginRight: '8px'}}
                            onClick={() => this.callModal('lineup')}
                        >添加最佳阵容</Button>
                        <Button
                            style={{marginRight: '8px'}}
                            onClick={() => this.callModal('forecast')}
                        >添加我的最爱评选</Button>
                    </div>

                    <div style={{marginBottom: '12px',}}>
                        <Select
                            style={{marginRight: '8px', width: 200}}
                            defaultValue={this.state.type}
                            value={this.state.type}
                            onChange={(val, opt) => this.onTypeSelect(val, opt)}
                        >
                            {/*//类型,-1=不限制，0=ai或聊天，1=方案打赏，2=方案购买，3=一起看送礼物，4=一起看赞助,5=盲盒,6=点球大战*/}

                            <Select.Option value={1}>球员评分</Select.Option>
                            <Select.Option value={2}>最佳阵容</Select.Option>
                            <Select.Option value={3}>我的最爱</Select.Option>
                        </Select>
                        <Checkbox
                            checked={this.state.timeCheck}
                            onChange={() => {
                                this.setState({
                                    timeCheck: !this.state.timeCheck,
                                }, () => {
                                    this.all()
                                })
                            }}
                        >
                            时间:
                        </Checkbox>
                        <RangePicker
                            showTime={{ format: 'HH:mm:ss' }}
                            format="YYYY-MM-DD HH:mm:ss"
                            onChange={this.onDateChange}
                            defaultValue={[
                                this.state.start,
                                this.state.end,
                            ]}
                            disabled={this.state.timeCheck === false}
                        />
                    </div>


                    <Table
                        dataSource={this.state.list}
                        columns={[this.playerColumns, this.lineupColumns, this.forecastColumns,][this.state.type - 1]}
                        pagination={false}
                        rowKey={(record, index) => index}
                    />

                    <PaginationFooter
                        pageIndex={this.state.p}
                        prevPage={this.prevPage}
                        nextPage={this.nextPage}
                    />
                </div>
            </Admin>
        </>
    }
}

export default Vote